<template>
  <div class="charge-container" id="chargeContainer">
    <div class="charge">
      <h2 style="text-align: center;">出库单</h2>
      <div class="table-head">
        <div><span style="text-decoration:underline ;">{{ data.year }}</span>年<span style="text-decoration:underline ;">{{
          data.month }}</span>月<span style="text-decoration:underline ;">{{ data.day }}</span>日</div>
        <div style="font-size:20px">NO. <span style="color: red;">{{ data.outboundNumber }}</span></div>
      </div>
      <table style="text-align: center;">
        <thead>
          <tr>
            <th width="150px">编码</th>
            <th width="150px">物品名称</th>
            <th width="150px">单位</th>
            <th width="150px">数量</th>
            <th width="150px">单价（元/件）</th>
            <th width="150px">金额（元）</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in data.infoList" :key="index">
            <td>{{ index + 1 }}</td>
            <td>{{ item.ProductName }}</td>
            <td>个</td>
            <td>{{ item.Quantity }}</td>
            <td>{{ item.Price }}</td>
            <td>{{ item.total }}</td>

          </tr>
          <tr style="height:80px">
            <td colspan="1">
              <div class="signBottom">
                <span class="left">领用部门</span>
                <el-button text :icon="useRenderIcon(EStamp)" title="盖章" @click="Signet1" v-if="!isSeal1"
                  class="right"></el-button>
                <span class="mySignet1" id="view_FQXOut1"></span>
              </div>
            </td>
            <td colspan="1">
              <div class="signBottom">
                <span class="left">领用人</span>
                <el-button text :icon="useRenderIcon(EStamp)" title="盖章" @click="Signet2" v-if="!isSeal2"
                  class="right"></el-button>
                <span class="mySignet1" id="view_FQXOut2"></span>
              </div>
            </td>
            <td colspan="1">
              <div class="signBottom">
                <span class="left">负责人</span> <el-button text :icon="useRenderIcon(EStamp)" title="盖章" @click="Signet3"
                  v-if="!isSeal3" class="right"></el-button>
                <span class="mySignet1" id="view_FQXOut3"></span>
              </div>

            </td>
            <td colspan="1">
              <div class="signBottom"> <span class="left">仓库员</span> <el-button text :icon="useRenderIcon(EStamp)"
                  title="盖章" @click="Signet4" v-if="!isSeal4" class="right"></el-button>
                <span class="mySignet1" id="view_FQXOut4"></span>
              </div>
            </td>
            <td colspan="1">
              合计
            </td>
            <td colspan="1">
              {{ data.totalMoney }}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
 
<script>
import { ref, watch, reactive, nextTick } from 'vue';
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import EStamp from "@iconify-icons/ep/stamp";
import { FXQ } from "@/utils/public/FXQ"
import { emitter } from "@/utils/mitt";
export default {
  props: {
    data: {
      type: Object,
      required: true
    },
    showType: {
      type: String,
      required: true
    }
  },
  setup(props, { emit }) {
    const isSeal1 = ref(false)
    const isSeal2 = ref(false)
    const isSeal3 = ref(false)
    const isSeal4 = ref(false)
    let dateArr = props.data.shipDate.split("-");
    props.data.year = dateArr[0];
    props.data.month = dateArr[1]
    props.data.day = dateArr[2]
    console.log(props.showType);
    nextTick(() => {
      if (props.showType == 'showDetail') {
        Signet1()
        Signet2()
        Signet3()
        Signet4()
      }
    })
    function Signet1() {
      // // 生成章
      const MYFXQ = FXQ.personal("销售部门", 0, 0, 0, 0);
      let view_FQX = document.querySelector("#view_FQXOut1");
      let MYFQX = `<img src='${MYFXQ}' style="width:100%;height:100%"  />`
      view_FQX.innerHTML = MYFQX;
      isSeal1.value = true
      emitter.emit("Outbound1");
    }
    function Signet2() {
      // // 生成章
      const MYFXQ = FXQ.personal("王**", 0, 0, 0, 0);
      let view_FQX = document.querySelector("#view_FQXOut2");
      let MYFQX = `<img src='${MYFXQ}' style="width:100%;height:100%"  />`
      view_FQX.innerHTML = MYFQX;
      isSeal2.value = true
      emitter.emit("Outbound2");
    }
    function Signet3() {
      // // 生成章
      const MYFXQ = FXQ.personal("李**", 0, 0, 0, 0);
      let view_FQX = document.querySelector("#view_FQXOut3");
      let MYFQX = `<img src='${MYFXQ}' style="width:100%;height:100%"  />`
      view_FQX.innerHTML = MYFQX;
      isSeal3.value = true
      emitter.emit("Outbound3");
    }
    function Signet4() {
      // // 生成章
      const MYFXQ = FXQ.personal("赵**", 0, 0, 0, 0);
      let view_FQX = document.querySelector("#view_FQXOut4");
      let MYFQX = `<img src='${MYFXQ}' style="width:100%;height:100%"  />`
      view_FQX.innerHTML = MYFQX;
      isSeal4.value = true
      emitter.emit("Outbound4");
    }
    return {
      isSeal1,
      isSeal2,
      isSeal3,
      isSeal4,
      useRenderIcon,
      EStamp,
      Signet1,
      Signet2,
      Signet3,
      Signet4
    };
    //把数字转为中文
  }
};
</script>

<style scoped lang="scss" >
.charge {
  width: 90%;
  margin: auto;
}

//@at-root
.table-head {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
}


table,
th,
td {
  border: 1px solid #bab9b9;
  border-collapse: collapse;
}



.fw-700 {
  font-size: 15px;
  font-weight: 800;
}

.signBottom {
  display: flex;
  position: relative;

  .left {
    height: 95px;
    width: 20px;
    border-right: 1px solid #bab9b9 !important;
  }


  .right {
    width: 80%;
    margin-top: 20px;
  }
}

.mySignet1 {
  position: absolute;
  margin-top: 20px;
  width: 70%;
  left: 30%;
  top: -10%;
}
</style>
